// 创建 store

// 引入 redux 中的 createStore
//    redux@4.2.0 这个版本，强烈推荐我们去使用 redux-toolkit
//    现阶段，我们先不用 redux-toolkit 下面的 createStore 不影响我们的使用
//    如果觉得这个删除线很不爽，那么可以降级安装 redux  npm install redux@4.1
import { createStore } from "redux";

// 引入 @redux-devtools/extension 的 composeWithDevTools
import { composeWithDevTools } from "@redux-devtools/extension";

// 引入 nanoid 生成唯一的 id 值
import { nanoid } from "nanoid";

// 定义好 state 的初始值
const initialState = {
  todos: [
    { id: 0, text: "吃饭", done: true, color: "" },
    { id: 1, text: "睡觉", done: false, color: "red" },
    { id: 2, text: "打豆豆", done: false, color: "blue" },
  ],
  filters: {
    /**
     * 状态，
     *    Active - 激活状态（没有完成的todo）
     *    DeActive - 未激活状态 (完成的todo)
     *    All - 全部（所有的todo）
     */
    status: "Active",
    // 颜色
    colors: ["red", "blue"],
  },
};

// 定义一个 reducer 纯函数
function reducer(prevState = initialState, action) {
  // 处理 action 。不同的 action.type 做数据的不同处理
  // {type: 'TODO_ADD', text: '上课'} 新增一个 todo 项
  // {type: 'TODO_DEL', id: 0} 删除 id 为 0 的 todo 项
  // {type: 'COLOR_CHANGE', id: 0, color: 'blue'} 修改 id 为 0 的 todo 的 color 为 blue
  switch (action.type) {
    case "TODO_ADD":
      return {
        ...prevState,
        todos: [
          ...prevState.todos,
          {
            // id: 3, // 写死了，后续注意
            id: nanoid(),
            text: action.text,
            done: false,
          },
        ],
      };

    case "COLOR_CHANGE":
      return {
        ...prevState,
        todos: prevState.todos.map((item) => {
          if (item.id === action.id) {
            // 确定了要的项
            return {
              ...item,
              color: action.color,
            };
          } else {
            return item;
          }
        }),
      };

    case "TODO_DEL":
      return {
        ...prevState,
        todos: prevState.todos.filter((item) => {
          return item.id !== action.id;
        }),
      };

    default:
      return prevState;
  }
}

// 创建 store 对象
//    1. 第一个参数，传递 reducer 纯函数
//    2. 第二个参数，传递 composeWithDevTools() 实现 redux-devtools 的激活
const store = createStore(reducer, composeWithDevTools());

export default store;
